<template>
  <div>
    <el-card>
      <!-- 筛选区域 -->
      <el-row :gutter="20" type="flex" justify="start" align="middle">
        <el-col :span="7">
          <el-input v-model="searchKey" placeholder="请输入日志内容" />
        </el-col>
        <el-col :span="5">
          <el-button id="filter-button" type="primary" @click="filterData">筛选</el-button>
          <el-button id="reset-button" type="default" @click="resetFilter">重置</el-button>
        </el-col>
      </el-row>
      <!-- 列表区 -->
      <div style="height: 60vh">
        <el-skeleton :loading="loading" animated>
          <el-table :data="paginatedData" border height="100%" style="width: 100%; margin-top:20px">
            <el-table-column prop="seqNo" label="日志序号" />
            <el-table-column prop="station" label="计算机名" />
            <el-table-column prop="actionReg" label="日志内容" />
            <el-table-column prop="happenTime" label="记录时间" />
<!--            FIXME:没用的数据列就不用显示了-->
<!--            <el-table-column prop="spare1" label="备注1" />-->
<!--            <el-table-column prop="spare2" label="备注2" />-->
          </el-table>
        </el-skeleton>
      </div>
      <!-- 分页 -->
      <template #footer>
        <div style="margin-top: -30px">
          <Pagination
              :total="total"
              :current-page.sync="searchForm.current"
              :total-pages="totalPages"
              @update:currentPage="handlePageChange"
          />
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue";
import { useRouter } from 'vue-router'
import lgApi from '@/api/log'
import Pagination from '@/components/Table/Pagination'
import { ElMessage } from 'element-plus';

const router = useRouter();
// Dom 挂载之后
onMounted(() => {
  getlogDataTableData();
})
//数据
const allTableData = ref([]);//接收后端全部结果
const tableData = ref([]);
const total = computed(() => tableData.value.length);//总记录条数
const totalPages = ref(1);//总页数
// 监听 allTableData 的变化，并同步更新 tableData
watch(allTableData, (newData) => {
  tableData.value = [...newData];
});

watch(total, (newData) => {
  totalPages.value = Math.ceil(newData / searchForm.size);
})

const handlePageChange = (page) => {
  searchForm.current = page;
};
//时间筛选
const timeFrame = ref('')

//搜索条件
const searchForm = reactive({
  current: 1,
  size: 10,
})


// 模糊查询关键字
const searchKey = ref('');


// 获取日志列表
const getlogDataTableData = async () => {
  //分页条件查询
  // const res = await fdApi.getFaultDiagnosesData({size: searchForm.size, current: searchForm.current});
  const res = await lgApi.countLogData({size: null, current: null});//查询全部
  if (res.data.status) {
    //用all前缀来接收保存
    allTableData.value = res.data.data;
  } else {
    ElMessage.error("获取后端数据失败");
    console.log(res.data.message);
  }
}

//分页监听
// 计算当前页需要显示的数据
const paginatedData = computed(() => {
  const start = (searchForm.current - 1) * searchForm.size;
  const end = start + searchForm.size;
  return tableData.value.slice(start, end);
});


// 模糊查询
const filterData = async () => {
  if (searchKey.value.length > 0) {
    const response = await lgApi.filterLogData(searchKey.value);
    //console.log(searchKey.value);
    //console.log(response.data);
    if (response.status) {
      tableData.value = response.data;
    } else {
      ElMessage.warning('未找到匹配的日志数据');
    }
  } else {
    tableData.value = [...allTableData.value];
  }
};


//重置模糊查询关键字
const resetFilter = () => {
  searchKey.value = '';
  tableData.value = [...allTableData.value];
}


//加载loading页面
const loading = ref(true);
watch(
    () => paginatedData.value,
    (newValue) => {
      loading.value = !(newValue && newValue.length > 0);
    },
    //配置项确保在组件挂载时，立即执行一次回调，以根据初始值正确设置 loading 的状态
    { immediate: true } // 立即执行一次，以确保初始值状态正确
);
</script>

<style scoped lang="scss">
/*筛选-重置按钮*/
.el-button {
  @include button-style;
}

#reset-button {
  background-color: $color-reset-button;

  &:hover {
    background-color: #babfd3;
  }
}
/*card背景、边框*/
.el-card {
  width: 100%;
  background-color: transparent;
  --el-card-border-color: transparent;
}
/*数据表背景*/
:deep(.el-table) {
  color: $color-font-table;//字体颜色
  background-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-row-hover-bg-color: transparent;

  // 鼠标悬停时的行样式
  .el-table__body-wrapper {
    .el-table__row {
      &:hover {
        color: $color-font-table-hover; // 悬停时字体颜色
      }
    }
  }
}
/*日期筛选框背景*/
:deep(.el-input__wrapper) {
  background-color: transparent;
}
:deep(.el-card__body) {
  padding: 0 0 20px;
}

:deep(.el-input__inner) {
  color: white;
}

</style>